<template>
  <div>
    <!-- 文章头部 -->
    <div>
      <van-nav-bar
        title="黑马头条"
        left-arrow
        @click-left="onClickLeft"
        class="article_title"
      />
    </div>
    <div class="user-info">
      <!--文章标题 -->
      <h1>{{ articles.title }}</h1>
      <!-- 头像.昵称.关注 -->
      <van-cell class="title" :title="articles.aut_name" :label="label">
        <template #icon>
          <div class="img">
            <img round :src="articles.aut_photo" alt="" />
          </div>
        </template>
        <FowllowUser
          class="button"
          :is_followed="articles.is_followed"
          :user-id="articles.aut_id"
          @update-is_followed="articles.is_followed = $event"
        ></FowllowUser>
        <!-- <van-button
          v-if="articles.is_followed"
          @click="onFollow"
          :loading="followLoading"
          class="button"
          round
          size="small"
          >已关注</van-button
        >
        <van-button
          v-else
          @click="onFollow"
          :loading="followLoading"
          class="button"
          color="#3296fa"
          round
          type="info"
          size="small"
          icon="plus"
          >关注</van-button
        > -->
      </van-cell>
    </div>
    <!-- 内容 -->
    <div
      class="article-content markdown-body"
      v-html="articles.content"
      ref="articles.content"
      style="width: 375px"
    ></div>
    <div>
      <van-divider>正文结束</van-divider>
    </div>
    <!--底部  -->
    <Comment
      :source="articles.art_id"
      :list="commentList"
      @onload-success="totalCommentCount = $event.total_count"
      @reply-click="onReplyClick"
    ></Comment>
    <div class="end">
      <van-tabbar>
        <div class="endBtn" @click="isShowComment = true">
          <span>写评论</span>
        </div>
        <van-tabbar-item
          :badge="commentList.length"
          icon="comment-o"
        ></van-tabbar-item>

        <CollectArticle
          v-model="articles.is_collected"
          :articlesId="articles.art_id"
        ></CollectArticle>
        <!-- <van-tabbar-item icon="good-job-o"></van-tabbar-item> -->
        <LikeArticle
          v-model="articles.attitude"
          :articlesId="articles.art_id"
        ></LikeArticle>
        <van-tabbar-item icon="share"></van-tabbar-item>
      </van-tabbar>
    </div>
    <van-popup v-model="isShowComment" position="bottom">
      <CommentPost
        :target="articles.art_id"
        @post-success="onPostSuccess"
      ></CommentPost>
    </van-popup>
    <!-- 评论回复 -->
    <van-popup v-model="isShowReply" style="height: 100%" position="bottom">
      <CommentReply
        v-if="isShowReply"
        :comment="currentComment"
        @close="isShowReply = false"
      ></CommentReply>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import dayjs from '@/utils/day'
import FowllowUser from '@/components/follow-user'
import CollectArticle from '@/components/collect-acticle'
import LikeArticle from '@/components/like-article'
import Comment from './components/comment'
import CommentPost from './components/comment-post.vue'
import CommentReply from './components/comment-reply.vue'
import './style.css'
export default {
  name: 'ArticleIndex',
  components: {
    FowllowUser,
    CollectArticle,
    LikeArticle,
    Comment,
    CommentPost,
    CommentReply
  },
  provide: function () {
    return {
      articleId: this.articleId
    }
  },

  data() {
    return {
      isShowComment: false,
      followLoading: false,
      // totalCommentCount: 0,
      commentList: [], //评论列表
      isShowReply: false, //回复
      currentComment: {} //当前点击回复的评论项
    }
  },
  created() {
    // console.log(this.articles)
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onPostSuccess(data) {
      this.isShowComment = false
      this.commentList.unshift(data.new_obj)
    },
    onReplyClick(comment) {
      this.isShowReply = true
      this.currentComment = comment
    }
  },
  computed: {
    ...mapState(['articles']),
    label() {
      return dayjs(this.articles.pubdate).fromNow()
    }
  }
}
</script>

<style scoped lang="less">
.article_title {
  background-color: #5094f3;
  :deep(.van-nav-bar__content) {
    .van-ellipsis {
      color: #fff;
    }
    .van-nav-bar__arrow {
      color: #fff;
    }
  }
}
.van-cell {
  height: 120px;
  .img {
    width: 70px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;
    img {
      width: 100%;
      border-radius: inherit;
    }
  }
  .van-cell__value {
    .van-button {
      width: 2.26667rem;
      height: 0.77333rem;
      border-radius: 26.64rem;
      cursor: default;
      padding: 0 0.21333rem;
      font-size: 0.32rem;
      font: inherit;
      height: 0.85333rem;
      padding: 0 0.21333rem;
      font-size: 0.32rem;
    }
  }
}
:deep(.user-info) {
  h1 {
    display: block;
    font-size: 1em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 700;
  }
}
:deep(h2) {
  margin-top: 0 !important;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 0.01333rem solid #eaecef;
  text-indent: 2em;
}
:deep(p) {
  font-size: 10px;
  margin-top: 0;
  margin-bottom: 0.21333rem;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  color: #25292e;
  margin-inline-end: 0px;
}
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
:deep(li) {
  display: list-item;
  text-align: -webkit-match-parent;
  font-size: 15px;
  text-indent: 0.5rem;
}
:deep(pre) {
  span {
    font-size: 15px;
    font-weight: 400;
  }
}
:deep(div) {
  font-size: 15px;
}
/deep/.end {
  width: 750px;
  .van-tabbar--fixed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750px;
    .endBtn {
      width: 3.76rem;
      height: 0.61333rem;
      border: 0.02667rem solid #eee;
      font-size: 0.4rem;
      line-height: 0.61333rem;
      color: #a7a7a7;
      border-radius: 26.64rem;
      line-height: 0.61333rem;
      text-align: center;
    }
  }
  .van-icon {
    font-size: 0.53333rem;
  }
}
</style>
